<template>
    <div id="wq" style='overflow: hidden;border-radius:30px;width: 2000px;height: 1000px'></div>
</template>

<script>
import request from "@/uitls/request";


import * as echarts from 'echarts'
import Vue from "vue";
export default {
    name: 'TwoChart',
    data(){
        return{
            legendData:[],
            seriesData:[],
            option:{},
            fk:{
                name:'',
                sales:''
            }
        }
    },
    created() {
        this.getListFromDb()
    },
    mounted() {
        this.listData()
        this.getB()
        this.getListFromDb()
    },
    methods:{
        getListFromDb(){
            // let newArr=[]

          request.get('http://localhost:8081/book/sale').then((res) => {

              const plainArray = JSON.parse(JSON.stringify(res.data));
              let newArr = plainArray.map(function(item){
                  return item;
              });

              var len=[]
              for(let i = 0; i < newArr.length; i++){
                  len.push(newArr[i].name)
              }
              // console.log(newArr)
              // console.log(len)
              this.seriesData = newArr
              this.legendData = len
              Vue.prototype.$newArr = newArr;
              Vue.prototype.$len = len;
              console.log(this.$len)
              console.log(this.$newArr)
              this.getB()
          })
        },
        listData(){
            this.getListFromDb()
           this.option = {
                title: {
                    text: '书籍销量',
                    subtext: '😊😊😊',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: this.$len
                },
                series: [
                    {
                        name: '书名',
                        type: 'pie',
                        radius: '55%',
                        center: ['40%', '50%'],
                        data: this.$newArr,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
        },
        getB(){
            var myChart = echarts.init(document.getElementById('wq'),'dark',{width:"1300px",height:"750px"});

            myChart.setOption(this.option)
            window.addEventListener("resize", function() {
                myChart.resize()
            })
        },

    }
}

</script>

<style scoped>

</style>
